<template>
  <f7-page @page:reinit="getDataItems"
    infinite
    :infinite-distance="10"
    :infinite-preloader="showPreloader"
    @infinite="loadMore"
  >
    <f7-navbar title="我参与的流程" back-link="Back"></f7-navbar>
    <f7-list  media-list>
      <f7-list-item v-for="(item) in tt" v-bind:key="item.id"
                    v-bind:title="item.title"
                    v-bind:subtitle="item.name"
                    v-bind:text="item.startTime"
                    v-bind:after="item.status"
                    v-bind:link="'/oa/personalwork/admit/' + item.businessKey.split(':')[0] + '/' + item.entityId + '/-1'"></f7-list-item>
    </f7-list>
  </f7-page>
</template>

<script>

  export default {
    data() {
      return {
        tt: [],
        pool:[],
        allowInfinite: true,
        showPreloader: false,
      }
    },
    created() {
      this.$f7ready((f7) => {
        let that = this;
        f7.request.setup({
          headers: {
            'AccessToken': sessionStorage.getItem('accessToken'),
            'JSESSIONID': sessionStorage.getItem('userToken')
          }
        });
        f7.request.json(that.GLOBAL.RequestAddress + '/camel/rest/workflow/myInvolvedHistory', {
          'page': 1,
          'limit': 10,
          'jsonStr': '',
          'otherStr': '',
          'start':0
        }, function (result) {
          if (result.totalCount >=0) {
            that.tt = result.data;
            if(that.tt.length < 10) {
              that.showPreloader = false;
            }
          }
        });
      });
    },
    methods: {
      getDataItems: function(){
        console.log("init")
        let that = this;
        let app  = that.$f7;
        app.request.json(this.GLOBAL.RequestAddress + '/camel/rest/workflow/myInvolvedHistory', {'page': 1, 'limit': 10, 'jsonStr': '', 'start':0}, function (result) {
          if (result.totalCount >-1) {
            that.tt = result.data;
            if(that.tt.length < 10) {
              that.showPreloader = false;
            }
          }
        })
      },
      showAlert: function (title, text) {
        let app = this.$7;
        app.dialog.alert(text, title, () => {
          //this.$f7router.back();
        });
      },
      loadMore() {
        const self = this;
        const app  = self.$f7;
        const length = self.tt.length;

        if (!self.allowInfinite ) return;
        self.allowInfinite = false;

        setTimeout(() => {

          if (length >= 200 ||  length % 10 != 0 ) {
            self.showPreloader = false;
            return;
          }

          app.request.json(this.GLOBAL.RequestAddress + '/camel/rest/workflow/myInvolvedHistory', {'start':length, 'page':  Math.ceil(length/10 + 1), 'limit': 10, 'jsonStr': ''}, function (result) {
            if (result.totalCount >0) {
              self.pool = result.data;
              self.tt = [...self.tt, ...self.pool];
            }
            self.allowInfinite = true;
          })
        }, 1000);
      },
    },
  }
</script>

